<template>
  <div class="container adopting transfer-record">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="转让记录" @clickLeft="back" />
    <view class="tabs flex-row-between-center">
      <view @click="active = 0" :class="['tab', active === 0 ? 'active-tab' : '']">
        <text>等待交易</text>
        <view :class="[active === 0 ? 'slider' : 'none']"></view>
      </view>
      <view @click="active = 1" :class="['tab', active === 1 ? 'active-tab' : '']">
        <text>正在交易</text>
        <view :class="[active === 1 ? 'slider' : 'none']"></view>
      </view>
      <view @click="active = 2" :class="['tab', active === 2 ? 'active-tab' : '']">
        <text>交易完成</text>
        <view :class="[active === 2 ? 'slider' : 'none']"></view>
      </view>
      <view @click="active = 3" :class="['tab', active === 3 ? 'active-tab' : '']">
        <text>交易申诉</text>
        <view :class="[active === 3 ? 'slider' : 'none']"></view>
      </view>
    </view>
    <!-- 等待交易 -->
    <div class="adopting-list" v-if="active == 0">
      <div v-for="(item,index) in list" :key="index" class="adopting-item">
        <div class="flex-between-center item-top">
          <div class="flex-left-center top-left">
            <div class="top-img-div">
              <img :src="item.logo" alt="" class="pet-img">
            </div>
            <div class="pet-name">
              {{ item.name }}
            </div>
          </div>
          <div class="flex-left-center top-right">
            <div class="pet-price">
              ￥{{ item.price }}
            </div>
            <div class="price-name">
              价值
            </div>
          </div>
        </div>
        <div class="flex-between-center item-center">
          <div class="flex-between-center center-date">
            <div class="date-left">
              <div class="date">
                {{ item.start_date }}
              </div>
              <div class="date-title">
                开始时间
              </div>
            </div>
            <div class="date-time">
              {{ item.start_t }}
            </div>
          </div>
          <div class="center-day">
            <div class="day">
              {{ item.in_days }} 天
            </div>
          </div>
          <div class="flex-between-center center-date">
            <div class="date-left">
              <div class="date">
                {{ item.end_date }}
              </div>
              <div class="date-title">
                结束时间
              </div>
            </div>
            <div class="date-time">
              {{ item.end_t }}
            </div>
          </div>
        </div>
        <div class="flex-between-center item-btm">
          <div class="btm-item">
            <span class="item-name">利润</span>
            <span class="item-number">￥{{ item.reward }}</span>
          </div>
          <div class="btm-item">
            <span class="item-name">收益率</span>
            <span class="item-number">{{ item.rate }}</span>
          </div>
          <div>
            <u-button size="small" :class="item.status != 2 ? 'van-button-dzr' : ''">
              {{ item.status | fixStatus }}
            </u-button>
          </div>
        </div>
      </div>
    </div>
    <div class="adopting-list" v-if="active == 1">
      <div
        v-for="(item,index) in list"
        :key="index"
        class="adopting-item"
        @click="dengdaibtn(item)"
      >
        <div class="flex-between-center item-top">
          <div class="flex-left-center top-left">
            <div class="top-img-div">
              <img
                :src="item.logo"
                alt=""
                class="pet-img"
              >
            </div>
            <div class="pet-name">
              {{ item.name }}
            </div>
          </div>
          <div class="flex-left-center top-right">
            <div class="pet-price">
              ￥{{ item.price }}
            </div>
            <div class="price-name">
              价值
            </div>
          </div>
        </div>
        <div class="flex-between-center item-center">
          <div class="flex-between-center center-date">
            <div class="date-left">
              <div class="date">
                {{ item.start_date }}
              </div>
              <div class="date-title">
                开始时间
              </div>
            </div>
            <div class="date-time">
              {{ item.start_t }}
            </div>
          </div>
          <div class="center-day">
            <div class="day">
              {{ item.in_days }}天
            </div>
          </div>
          <div class="flex-between-center center-date">
            <div class="date-left">
              <div class="date">
                {{ item.end_date }}
              </div>
              <div class="date-title">
                结束时间
              </div>
            </div>
            <div class="date-time">
              {{ item.end_t }}
            </div>
          </div>
        </div>
        <div class="flex-between-center item-btm">
          <div class="btm-item">
            <span class="item-name">利润</span>
            <span class="item-number">￥{{ item.reward }}</span>
          </div>
          <div class="btm-item">
            <span class="item-name">收益率</span>
            <span class="item-number">{{ item.rate }}</span>
          </div>
          <div>
            <u-button size="small" :class="item.status != 2 ? 'van-button-ssz' : ''">
              {{ item.status | fixStatus }}
            </u-button>
          </div>
        </div>
      </div>
    </div>
    <div class="adopting-list" v-if="active == 2">
      <div
        v-for="(item,index) in list"
        :key="index"
        class="adopting-item"
      >
        <div class="flex-between-center item-top">
          <div class="flex-left-center top-left">
            <div class="top-img-div">
              <img
                :src="item.logo"
                alt=""
                class="pet-img"
              >
            </div>
            <div class="pet-name">
              {{ item.name }}
            </div>
          </div>
          <div class="flex-left-center top-right">
            <div class="pet-price">
              ￥{{ item.price }}
            </div>
            <div class="price-name">
              价值
            </div>
          </div>
        </div>
        <div class="flex-between-center item-center">
          <div class="flex-between-center center-date">
            <div class="date-left">
              <div class="date">
                {{ item.start_date }}
              </div>
              <div class="date-title">
                开始时间
              </div>
            </div>
            <div class="date-time">
              {{ item.start_t }}
            </div>
          </div>
          <div class="center-day">
            <div class="day">
              {{ item.in_days }}天
            </div>
          </div>
          <div class="flex-between-center center-date">
            <div class="date-left">
              <div class="date">
                {{ item.end_date }}
              </div>
              <div class="date-title">
                结束时间
              </div>
            </div>
            <div class="date-time">
              {{ item.end_t }}
            </div>
          </div>
        </div>
        <div class="flex-between-center item-btm">
          <div class="btm-item">
            <span class="item-name">利润</span>
            <span class="item-number">￥{{ item.reward }}</span>
          </div>
          <div class="btm-item">
            <span class="item-name">收益率</span>
            <span class="item-number">{{ item.rate }}</span>
          </div>
          <div class="vant-btn">
            <u-button size="small" class="van-button-ywc">
              {{ item.status | fixStatus }}
            </u-button>
          </div>
        </div>
      </div>
    </div>

    <div class="adopting-list" v-if="active == 3">
      <div
        v-for="(item,index) in list"
        :key="index"
        class="adopting-item"
      >
        <div class="flex-between-center item-top">
          <div class="flex-left-center top-left">
            <div class="top-img-div">
              <img
                :src="item.logo"
                alt=""
                class="pet-img"
              >
            </div>
            <div class="pet-name">
              {{ item.name }}
            </div>
          </div>
          <div class="flex-left-center top-right">
            <div class="pet-price">
              ￥{{ item.price }}
            </div>
            <div class="price-name">
              价值
            </div>
          </div>
        </div>
        <div class="flex-between-center item-center">
          <div class="flex-between-center center-date">
            <div class="date-left">
              <div class="date">
                {{ item.start_date }}
              </div>
              <div class="date-title">
                开始时间
              </div>
            </div>
            <div class="date-time">
              {{ item.start_t }}
            </div>
          </div>
          <div class="center-day">
            <div class="day">
              {{ item.days }}天
            </div>
          </div>
          <div class="flex-between-center center-date">
            <div class="date-left">
              <div class="date">
                {{ item.end_date }}
              </div>
              <div class="date-title">
                结束时间
              </div>
            </div>
            <div class="date-time">
              {{ item.end_t }}
            </div>
          </div>
        </div>
        <div class="flex-between-center item-btm">
          <div class="btm-item">
            <span class="item-name">利润</span>
            <span class="item-number">￥{{ item.reward }}</span>
          </div>
          <div class="btm-item">
            <span class="item-name">收益率</span>
            <span class="item-number">{{ item.rate }}</span>
          </div>
          <div>
            <u-button size="small" :class="item.status == 4 ? 'van-button-ssz' : item.status == 6 ? 'van-button-ywc' : 'van-button-ywc'">
              {{ item.status | fixStatus }}
            </u-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 兑换钻石 -->
    <u-popup :show="showExchange" mode="bottom">
      <div class="gem-card div-sizing">
        <div class="flex-between-center gem-top-div">
          <span class="gem-top-left van-ellipsis">可兑换DPL <span
              class="font-family-din">{{ rateInfo.balance }}</span></span>
          <span>兑换比例1:{{ rateInfo.rate }}</span>
        </div>
        <div class="flex-between-center gem-van-cell">
          <span>兑换数量:</span>
          <van-field v-model="number" type="number" placeholder="请输入兑换数量" />
        </div>
        <div class="vant-btn">
          <van-button @click="submitExchange">
            确认兑换
          </van-button>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
  import {
    getTransferList,
    exchangeWater,
    putGrounding
  } from '@/api/index.js'
  export default {
    filters: {
      fixStatus(status) {
        return status === 0 ? '待转让' : status === 1 ? '等待对方支付' : status === 2 ? '查看支付' : status === 3 ? '已转让' :
          status === 4 ? '申诉中...' : status === 5 ? '申诉成功' : status === 6 ? '申诉失败' : ''
      },
      fixTime(value) {
        return value < 10 ? '0' + value : value
      }
    },
    data() {
      return {
        active: 0,
        page: 1,
        index: 1,
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
        error: false,
        rateInfo: {},
        item: {},
        number: '',
        showExchange: false,
        tabLoading: false,
        setTime: null,
        witch: 1
      }
    },
    watch: {
      watch: {
        index(val) {
          console.log(val);
        }
      },
      active() {
        this.tabLoading = true
        this.onRefresh()
      },
      // 能量数量小数监听 只允许输入小数点后两位
      number(value) {
        const index = value.indexOf('.')
        if (index !== -1) {
          if (value.substring(index + 1).length > 2) {
            value = value.substring(0, value.length - 1)
            this.number = parseFloat(value).toFixed(2)
          }
        }
        if (this.number > this.rateInfo.balance) {
          this.number = this.rateInfo.balance
        }
      }
    },
    created() {
      this.onRefresh()
      // if (vm.$cookie.get('tabCrueent')) {
      //   vm.active = parseInt(vm.$cookie.get('tabCrueent'))
      // }
    },
    onReachBottom() {
      this.get_info()
    },
    methods: {
      dengdaibtn(){
         // @click="$router.push({path:'/mDealInfo',query:{id:item.id,status:item.status}})
      },
      back() {
        uni.navigateBack()
      },
      beforeChange(index) {
        if (this.tabLoading) {
          return false
        } else {
          return true
        }
      },
      get_info() {
        this.$ui.loading('加载中')
        const vm = this
        if (this.refreshing) {
          this.page = 1
        }
        getTransferList({
          page: this.page,
          type: this.active + 1
        }).then(res => {
          if (vm.refreshing) {
            vm.list = []
            vm.tabLoading = false
          }
          clearTimeout(vm.setTime)
          vm.setTime = null
          if (res.code === 1) {
            if (vm.active == 0) {
              vm.witch = res.data.witch
            }
            const _list = res.data.list
            for (const i in _list) {
              const item = _list[i]
              if (item.deal_time !== 0) {
                const timeObj = this.transformTime(item.deal_time)
                item.hour = timeObj.hour
                item.minute = timeObj.minute
                item.second = timeObj.second
                item.setTime = setInterval(() => {
                  if (item.second !== 0) {
                    item.second--
                  } else if (item.minute !== 0) {
                    item.minute--
                    item.second = 59
                  } else if (item.hour !== 0) {
                    item.hour--
                    item.minute = 59
                    item.second = 59
                  } else {
                    item.deal_time = 0
                    clearInterval(item.setTime)
                  }
                }, 1000)
              } else {
                item.hour = 0
                item.minute = 0
                item.second = 0
              }
              const startObj = vm.eidtFormat(item.create_time)
              item.start_date = startObj.date
              item.start_t = startObj.time
              const endtObj = vm.eidtFormat(item.end_time)
              item.end_date = endtObj.date
              item.end_t = endtObj.time
            }
            this.list = [...this.list, ..._list]
            uni.hideLoading()
            console.log(this.list);
            if (res.data.pages > this.page) {
              this.page++
            } else {
              this.finished = true
            }
          } else {
            vm.error = true
          }
          vm.loading = false
          vm.refreshing = false
        }, () => {
          vm.loading = false
          vm.error = true
        })
        if (!vm.setTime) {
          vm.setTime = setTimeout(() => {
            vm.tabLoading = false
            vm.loading = false
            vm.error = true
            clearTimeout(vm.setTime)
            vm.setTime = null
          }, 30000)
        }
      },
      eidtFormat(time) {
        time = time.replace(/-/g, '/')
        let date = new Date(time);

        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours()
        let min = date.getMinutes()
        let second = date.getSeconds()
        return {
          date: (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day),
          time: (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min)
        }
      },
      // 倒计时
      transformTime(seconds) {
        if (seconds !== 0) {
          const hour = Math.floor(seconds / Math.pow(60, 2))
          // 计算剩余秒数
          const j = seconds % Math.pow(60, 2)
          // 计算剩余分钟
          const minute = Math.floor(j / 60)
          // 剩余秒数
          const second = j % 60
          return {
            hour,
            minute,
            second
          }
        } else {
          return {
            hour: 0,
            minute: 0,
            second: 0
          }
        }
      },
      onRefresh() {
        this.finished = false
        this.refreshing = true
        this.loading = true
        this.get_info()
      },
      grounding(item) {
        const vm = this
        putGrounding({
          id: item.id
        }).then(res => {
          if (res.code == 1) {
            vm.$ui.toast(res.msg)
            vm.onRefresh()
          }
        })
      },
      exchangeAssets(item) {
        const vm = this
        vm.item = item
        vm.showExchange = true
        vm.handleGem('select', (res) => {
          vm.rateInfo = res.data
        })
      },
      submitExchange() {
        this.handleGem('submit', (res) => {
          this.$ui.toast('转换成功')
          this.number = ''
          this.showExchange = false
          this.onRefresh()
        })
      },
      handleGem(type = 'select', callback) {
        const vm = this
        const data = {
          id: vm.item.id
        }
        if (type == 'submit') {
          data.num = vm.number
        }
        exchangeWater(data).then(res => {
          if (res.code === 1) {
            callback(res)
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .adopting-list {
    padding: 30rpx;
  }

  .van-popup {
    background: rgba(#ffffff, 0);
  }

  // 资产转换
  .gem-card {
    width: 590rpx;
    height: 488rpx;
    border-radius: 40rpx;
    padding: 146rpx 30rpx 70rpx;
    //background: url("~assets/mine/exchange-pop-bg.png") no-repeat;
    background-size: 100% 100%;

    .gem-top-div {
      .gem-top-left {
        max-width: 300rpx;

        span {
          margin-left: 16rpx;
        }
      }
    }

    .gem-van-cell {
      margin-top: 40rpx;

      &>span {
        margin-right: 20rpx;
      }

      .van-cell {
        flex: 1;
        border-radius: 20rpx;
        padding: 16rpx 20rpx;
        line-height: normal;
        background: #f8f8f8;
      }

      .van-field__control::placeholder,
      .van-field__control::-moz-placeholder {
        color: #989898;
        font-size: 28rpx;
      }
    }

    .vant-btn {
      width: 100%;
      margin: 50rpx 0 0;

      .van-button {
        width: 100%;
        margin: 0 auto;
        border-radius: 10rpx;
        font-size: 28rpx;
        background: linear-gradient(90deg, #1982dc, #50a2eb);
        background: -moz-linear-gradient(90deg, #1982dc, #50a2eb);
        background: -o-linear-gradient(90deg, #1982dc, #50a2eb);
        background: -webkit-linear-gradient(90deg, #1982dc, #50a2eb);
      }
    }
  }

  .adopting-item {
    padding: 20rpx;
    margin-bottom: .5rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: .05rem;
    box-shadow: rgba(#000000, .2) 0 .08rem .53rem -.08rem;
    position: relative;
    z-index: 3;
    border-radius: .26rem;
    // background: url('~assets/mine/adopting-bg.png') no-repeat;
    // background-size: 100% 100%;

    .item-top {
      margin-bottom: .13rem;

      .top-left {
        .top-img-div {
          width: 1.22rem;
          height: 1.22rem;
          // border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          .pet-img {
            width: auto;
            height: 1.06rem;
          }
        }

        .pet-name {
          margin-left: .18rem;
          font-size: .53rem;
          font-weight: bold;
        }
      }
    }

    .top-right {
      .pet-price {
        font-size: .42rem;
        color: #FF600F;
        padding: 0 .26rem;
        font-family: 'DIN';

        span {
          font-size: .32rem;
        }
      }

      .price-name {
        font-size: .32rem;
        padding-left: .26rem;
        position: relative;

        &::after {
          content: '';
          width: .02rem;
          height: .58rem;
          background: #EBEBEB;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    .item-center {
      padding: .26rem .16rem;
      background: rgba(#F2F6FF, 1);
      border-radius: .05rem;
      box-sizing: border-box;

      .center-date {
        .date-left {
          .date {
            font-size: .48rem;
            font-weight: bold;
            margin-bottom: .16rem;
          }

          .date-title {
            font-size: .32rem;
          }
        }

        .date-time {
          font-weight: 500;
          margin-left: .21rem;
        }
      }

      .center-day {
        width: 2.45rem;

        .day {
          width: .88rem;
          margin: 0 auto;
          font-size: .32rem;
          text-align: center;
          border-radius: .24rem;
          border: .02rem solid #DBDBDB;
          position: relative;

          &::after {
            content: '';
            width: .8rem;
            height: .02rem;
            background: #DBDBDB;
            position: absolute;
            right: -.88rem;
            top: 50%;
            transform: translateY(-50%);
          }

          &::before {
            content: '';
            width: .8rem;
            height: .02rem;
            background: #DBDBDB;
            position: absolute;
            left: -.88rem;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }

    .item-btm {
      margin-top: .37rem;

      .btm-item {
        display: flex;
        align-items: center;

        .item-number {
          color: #FF600F;
          font-family: 'DIN';
          margin-left: 4px;
        }
      }
    }

    .vant-btn {
      margin: 0;

      .van-button {
        width: 2.46rem;
        height: .8rem;
        line-height: .8rem;
        padding: 0;
        font-size: .37rem;
        border-radius: 0;
        // background: #CFAA71;
      }

      .van-button-dzr {
        width: auto;
        color: #FF600F;
        text-align: right;
        background: none;
      }

      .van-button-ckpz {
        width: 2.69rem;
        font-size: .37rem;
      }

      .van-button-djs {
        width: 2.69rem;
        background: #F2F6FF;

        .van-count-down {
          color: #447DF6;
        }
      }

      .van-button-ywc {
        width: auto;
        color: #000000;
        text-align: right;
        background: none;
      }

      .van-button-ssz {
        width: auto;
        color: #AFAFAF;
        text-align: right;
        background: none;
      }

      .van-button-sscg {
        width: auto;
        color: #447DF6;
        text-align: right;
        background: none;
      }

      .van-button-sssb {
        width: auto;
        color: #696969;
        text-align: right;
        background: none;
      }
    }
  }
</style>
